<template>
	<view class="own-fund-management">
		<view class="first-line">
			<view class="first-line-l">
				<text class="red-text">¥{{balance}}</text>
				<text class="blue-text">账户余额</text>
				<text class="blue-text">锁定中:¥{{lockBalance}}</text>
			</view>
			<view class="first-line-r">
				<view class="first-line-btn red-btn-bg" @tap="onRecharge">
					充值
				</view>
				<view class="first-line-btn blue-btn-bg" @tap="onWithdrawal">
					提现
				</view>
			</view>
		</view>
		<text>消费记录</text>
		<view class="own-fund-management-bottom">
			<view class="shop-item" v-for="(shopItem,index) in shopItems" :key="index" >
				<view class="commodity-item-m">
					<image :src="shopItem.imgURL" mode="widthFix"></image>
					<view class="">
						<view class="">
							{{shopItem.title}}
						</view>
						<view class="commodity-item-price-unit">
							<view class="price_color">
								¥{{shopItem.price}}
							</view>
							<view class="">
								x{{shopItem.piece}}
							</view>
						</view>
					</view>
				</view>
				<view>订单编号:{{shopItem.orderID}}</view>
				<view>创建时间:{{shopItem.date}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
    export default {
      
		data() {
			return {
				balance: "0.00",
				lockBalance: "0.00",
				shopItems:[ {
					orderID: "E201810239489334",
					imgURL: "/static/img/index1/u131.jpg",
					title: "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造",
					price: 288.00,
					piece: 1,
					date:"2018-12-11 18:00:48"
				}, {
					orderID: "E201810239489334",
					imgURL: "/static/img/index1/u131.jpg",
					title: "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造",
					price: 288.00,
					piece: 1,
					date:"2018-12-11 18:00:48"
				}
				
				]
			}
		},
		methods:{
			onRecharge(){
			},
			onWithdrawal(){
				uni.navigateTo({
					url:"/pages/own/own-fund-withdrawal"
				})
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:"/pages/own/own-fund-detail"
			})
		}
	}
</script>

<style lang="scss">
	.own-fund-management {
		width: 100%;
		
		background-color: rgba(242, 242, 242, 1);

		.first-line {
			// border: 1px solid red;
			background-color: white;
			margin-bottom: 10px;
			
			padding-top: 20px;
			padding-bottom: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
		}

		.first-line-l {
			display: flex;
			flex-direction: column;
			text-align: center;
			line-height: 1.4;
		}

		.first-line-r {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			text-align: center;
			font-size: 13px;
		}

		.first-line-btn {
			color: white;
			border-radius: 5px;
			width: 88px;
			height: 33px;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			margin: 5px;
		}

		.red-text {
			font-weight: 650;
			color: #C24D50;
			font-size: 14px;
		}

		.blue-text {
			font-size: 14px;
			font-weight: 400;
			color: #7992AC;
		}

		.red-btn-bg {
			background-color: rgba(255, 102, 0, 1);
		}

		.blue-btn-bg {
			background-color: rgba(102, 102, 102, 1);
		}
		
		.shop-item{
			padding: 30upx 40upx;
			display: flex;
			flex-direction: column;
			background-color: rgba(242, 242, 242, 1);
			margin-bottom: 10px;
			color: #666666;
		}
		
		.commodity-item-m {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			// border:1px solid red;
			
			image {
				width: 300upx;
				margin-right: 20upx;
			}
			
			
			font-weight: normal;
			color: #666666;
			font-weight: 400;
			font-style: normal;
			font-size: 14px;
			
			.commodity-item-price-unit {
				margin-top: 20upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}
		
		.own-fund-management-bottom{
			background-color: white;
		}
	}
</style>
